<template>
  <!-- 按钮 -->
  <el-button type="primary" size="default" :icon="Plus" style="margin-bottom: 20px" :disabled="!categoryStore.getCategory3Id" @click="showSpuAdd">添加SPU</el-button>
  <!-- 表格 -->
  <el-table row-key="id" :data="spuInfoList" stripe border style="width: 100%" v-loading="loading">
    <!-- 序号 -->
    <el-table-column align="center" type="index" label="序号" width="80">
      <template v-slot="{ row, $index }">
        {{ pageSize * (current - 1) + ($index + 1) }}
      </template>
    </el-table-column>
    <!-- SPU名称 -->
    <el-table-column prop="spuName" label="SPU名称" />
    <!-- SPU描述 -->
    <el-table-column prop="description" label="SPU描述" />
    <!-- 操作-->
    <el-table-column label="操作">
      <template #default="{ row, $index }">
        <el-button size="default" :icon="Plus" type="primary" @click="showSkuAdd(row)"></el-button>
        <el-button size="default" :icon="Edit" type="primary" @click="showSpuUpdate(row)"></el-button>
        <el-button size="default" :icon="InfoFilled" type="info" @click="handler(row)"></el-button>
        <el-button size="default" :icon="Delete" type="danger" @click="deleteSpu(row.id)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
    v-model:currentPage="current"
    v-model:page-size="pageSize"
    :page-sizes="[3, 6, 9]"
    :disabled="disabled"
    layout=" prev, pager, next, jumper,->,sizes,total"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <!-- 查看sku列表数据 -->
  <el-dialog v-model="dialogTableVisible" :title="`${spuName}=>sku列表`">
    <el-table :data="skuList">
      <el-table-column property="skuName" label="名称" width="150" />
      <el-table-column property="price" label="价格" width="200" />
      <el-table-column property="weight" label="重量" width="200" />
      <el-table-column property="skuDefaultImg" label="默认图片地址">
        <template v-slot="{ row, $index }">
          <img :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script lang="ts">
export default {
  name: "SpuList",
};
</script>
<script lang="ts" setup>
// 引入element的图标
import type { SkuListModel } from "@/api/product/model/skuModel";
import { reqGetSkuInfoBySkuId, reqGetSkuInfoListBySpuId } from "@/api/product/sku";
import { reqDeleteSpuById, reqGetSpuInfoList } from "@/api/product/spu";
import useCategoryStore from "@/stores/category";
import { Plus, Delete, InfoFilled, Edit } from "@element-plus/icons-vue";
import { ref, watch } from "vue";
//  引入类型
import type { SpuListModel, SpuModel } from "../../../../api/product/model/spuModel";
// 引入标识数据
import { ShowStatus } from "./types";

// 定义加载效果的loading
const loading = ref<boolean>(false);
// 定义表格的数组
const spuInfoList = ref<SpuListModel>([]);
// 页码
const current = ref<number>(1);
// 每页的条数
const pageSize = ref<number>(3);
// 总条数
const total = ref<number>(0);
// 获取分类的仓库
const categoryStore = useCategoryStore();
// 定义一个方法 用来获取spu列表的数据  内部异步请求 调用接口函数
const getSpuInfoList = async (page: number = current.value, limit: number = pageSize.value) => {
  // 设置加载效果的显示
  loading.value = true;
  // 重新修订current 和 pageSize 的值
  current.value = page;
  pageSize.value = limit;
  const result = await reqGetSpuInfoList({ page, limit, category3Id: categoryStore.getCategory3Id as number });
  // 存储spu列表的数组数据
  spuInfoList.value = (result as any).records;
  // 设置总条数
  total.value = (result as any).total;
  // 设置记载效果的隐藏
  loading.value = false;
};

// 定义分页需要的数据
const disabled = ref(false);
// 定义页码和pageSize切换时触发的回调函数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  getSpuInfoList(val, pageSize.value);
};

// 监视三级分类的id   数据变化了  则发送请求
watch(
  () => categoryStore.getCategory3Id,
  (category3Id) => {
    // 判断三级分类的id 数据是否存在
    if (!category3Id) {
      spuInfoList.value = []; //清空数组数据
      current.value = 1; //页码
      pageSize.value = 3; //每页的条数
      total.value = 0; // 总条数
      return;
    }
    // 此时三级分类的id存在
    getSpuInfoList();
  },
  { immediate: true }
);
// 定义显示对话框的标识
const dialogTableVisible = ref<boolean>(false);
//定义对话框需要的sku数组
const skuList = ref<SkuListModel>([]);
// 定义一个名字
const spuName = ref("");
// 定义查看sku列表的数据
const handler = async (row: SpuModel) => {
  dialogTableVisible.value = true;
  let res = await reqGetSkuInfoListBySpuId(row.id as number);
  skuList.value = res;
  spuName.value = row.spuName;
};
// 用于接受父级组件的自定义事件
const emits = defineEmits(["setShowStatus", "setCurrentSpuInfo"]);
// 点击添加的回调函数
const showSpuAdd = () => {
  // 修改标识   修成  ShowStatus.SPU_ADD
  emits("setShowStatus", ShowStatus.SPU_ADD);
  emits("setCurrentSpuInfo");
};
// 点击修改Spu按钮的回调函数
const showSpuUpdate = (row: SpuModel) => {
  // 修改标识   修成  ShowStatus.SPU_ADD
  emits("setShowStatus", ShowStatus.SPU_ADD);
  // 分发父级组件传递过来的自定义事件  同时传递过去row  （spu对象的数据）
  emits("setCurrentSpuInfo", {
    ...row,
    spuImageList: [], //不写空数组的话就是null
    spuSaleAttrList: [], //原理同上
  });
};
// 点击添加SKu按钮的回调函数
const showSkuAdd = (row: SpuModel) => {
  // 修改标识   修成  ShowStatus.SKU_ADD
  emits("setShowStatus", ShowStatus.SKU_ADD);
  // 显示sku添加的界面的同时 传入spu的对象  row
  emits("setCurrentSpuInfo", {
    id: row.id,
    spuName: row.spuName,
  });
};

// 删除的回调
const deleteSpu = async (id: number) => {
  await reqDeleteSpuById(id);
  getSpuInfoList();
};
</script>
<style scoped></style>
